<!-- 笔记 -->
<template>
  <main class="page-main">
    <div class="margin-20 font-size-24">
      <a-radio-group v-model:value="iconType" :style="{ marginBottom: '8px' }">
        <a-radio-button value="outline">
          <CheckSquareOutlined/>
          线框风格
        </a-radio-button>
        <a-radio-button value="filled">
          <CheckSquareFilled/>
          实底风格
        </a-radio-button>
        <a-radio-button value="twoTone">
          <CheckSquareTwoTone/>
          双色风格
        </a-radio-button>
      </a-radio-group>
      <a-row class="margin-top-20">
        <a-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" v-for="item in list" class="margin-bottom-20">
          <IconItem :icon-name="item" :note-flag="noteFlag" @changed="handleIconChanged" :key="new Date().getTime()"></IconItem>
        </a-col>
      </a-row>
    </div>
  </main>
</template>
<script lang="ts">
import PageHeader from "@/components/PageHeader.vue";
import PageFoot from "@/components/PageFoot.vue";
import * as iconUtils from "@/utils/IconUtils"

import {h} from "vue"
import {CheckSquareTwoTone, CheckSquareOutlined,CheckSquareFilled} from '@ant-design/icons-vue';

import IconItem from "@/views/sysIcon/IconItem.vue";

export default {
  props:{
    hideNote:{type:Boolean}
  },
  components: {
    IconItem,
    PageFoot,
    PageHeader, CheckSquareFilled, CheckSquareOutlined,CheckSquareTwoTone
  },
  data() {
    return {
      iconType: "outline",
      list: [],
      noteFlag:true
    }
  },
  watch: {
    iconType(value) {
      console.log("asdfasdfa", value);
      if (value === "outline") {
        this.list = iconUtils.outlinedNameList;
        return
      }
      if (value === "filled") {
        this.list = iconUtils.filledNameList;
        return
      }
      this.list = iconUtils.twoToneNameList;
    }
  }, methods: {
    handleIconChanged(name){
      this.$emit("changed",name);
    }
  },
  mounted: function () {
    if(this.props && this.props.hideNote){
      this.noteFlag = false;
    }
    this.list = iconUtils.outlinedNameList;
  }
}
</script>
